<template>
	<div>
			<div class="graybg"></div>
			<!--头部-->
			<header id="header">
				<div class="header header_bg clearfix">
					<div class="header_left pull-left">
						<i class="icon iconfont icon-xia baiColor" onclick="javascript:history.back(-1)">&#xe612;</i>
					</div>
					<div class="header_center">
						<span class="baiColor">会员支付</span>
					</div>
				</div>
			</header>
			<!--==-->
			<div class="main">
				<div class="bankcard marginAuto">
					<!--支付宝-->
					<div class="zhifubao marginAuto clearfix">
						<div class="each_main pull-left">
							<h5 class="pull-left" :class="{activeclor:zhifubao}" @click="zhifubaoclick"></h5>
							<h4 class="iconfont pull-left">&#xe62b;</h4>
							<h3 class="pull-left">
								<p>支付宝</p>
								<p>支付宝支付</p>
							</h3>
						</div>
						<div class="each_main pull-right">
							<h5 class="pull-left" :class="{activeclor:yue}" @click="yueclick"></h5>
							<h4 class="iconfont pull-left" style="color: #FCB616;font-size:32px;">&#xe62c;</h4>
							<h3 class="pull-left">
								<p>余额</p>
								<p>余额支付</p>
							</h3>
						</div>
					</div>
					<!--银行卡支付-->
					<!--<div class="bankcard_main marginAuto clearfix" @click="change">
						<h5 class="bank_logo iconfont pull-left">
							<img src="../assets/huiyuan1.png"/>
						</h5>
						<div class="bankcard_text pull-left">
							<h4>中国建设银行</h4>
							<p>尾号{{tail}}</p>
						</div>
						<h6 class=" iconfont pull-right">&#xe615;</h6>
					</div>-->
				</div>
			</div>
			<!--==-->
			<div class="money marginAuto">
				<div class="money_main marginAuto">
					<h4>支付金额</h4>
					<div class="money_text">
						<span>￥</span>
						<span v-text="moneynum"></span>
					</div>
				</div>
			</div>
			<!--更换辅导员-->
			<div class="change marginAuto">
				<input type="text" placeholder="" maxlength="10" v-model="fudao"/>
			</div>
			
			<div class="footer_button button baiColor" @click="enter" >
				<span>确认支付</span>
			</div>
	</div> 
</template>

<script>
	export default{
		data(){
			return{
				imgURL:this.imgURl,
				moneynum:"00.00",	//支付金额
				zhifubao:true,
				yue:false,
				type:"2",//2:支付宝1：余额
				indentid:"",	//订单id
				URLid:"",	//url链接携带地址
				fudao:""	//辅导员id
			}
		},
		mounted(){
			//加载会员的金额
			var _this = this;
			var str=window.location.href;
			var num=str.lastIndexOf("/")+1;
			var id = str.substring(num);
			_this.URLid = id;
			var info = window.localStorage.data;
			var params = new URLSearchParams();
			params.append('token', info);
			params.append('id', id);
			//获取钱数
			this.$axios({
			    url:"Home/User/shop_member_xq",
				method:"post",
				data:params
			 }).then(function(res){
			  	var datas = res.data;
			  	_this.moneynum = datas.data.member_price
			}).catch(function(err){
				console.log(err)		
			});
			//默认生成支付宝支付订单
			params.append('token', info);
			params.append('member_id', id);
			params.append('type',2);
			this.$axios({
			   url:"Home/User/purchase",
				method:"post",
				data:params
			   }).then(function(res){
			   	var datas = res.data;
				if(datas.code == 1){
					_this.indentid = datas.data;
				}else if(datas.code == 2){
					alert("订单生成失败");
					_this.$router.push("huiyuan");
				}else if(datas.code == 3){
					alert("您已经购买过更高级别的会员");
				}else if(datas.code == 4){
					alert("您的余额不足，请使用其他方式支付");
				}
			}).catch(function(err){
				console.log(err)		
			})	
		},
		methods:{
		//点击支付宝
		zhifubaoclick(){
			this.zhifubao = true;
			this.yue = false;
			let _this = this;
			let id = _this.URLid;
			let type = 2;
			_this.type = 2;
			let info = window.localStorage.data;
			let params = new URLSearchParams();
			params.append('token', info);
			params.append('member_id', id);
			params.append('type',type);
			this.$axios({
			   url:"Home/User/purchase",
				method:"post",
				data:params
			   }).then(function(res){
			   	var datas = res.data;
				if(datas.code == 1){
					_this.indentid = datas.data;
				}else if(datas.code == 2){
					alert("订单生成失败");
					_this.$router.push("huiyuan");
				}else if(datas.code == 3){
					alert("购买商品不符合");
				}else if(datas.code == 4){
					alert("您的余额不足，请使用其他方式支付");
				}
			}).catch(function(err){
				console.log(err)		
			})	
		},
		//点击余额
		yueclick(){
			this.zhifubao = false;
			this.yue = true;
			let _this = this;
			let id = _this.URLid;
			let type = 1;
			_this.type = 1;
			let info = window.localStorage.data;
			let params = new URLSearchParams();
			params.append('token', info);
			params.append('member_id', id);
			params.append('type',type);
			this.$axios({
			   url:"Home/User/purchase",
				method:"post",
				data:params
			   }).then(function(res){
			   	var datas = res.data;
				if(datas.code == 1){
					_this.indentid = datas.data;
				}else if(datas.code == 2){
					alert("订单生成失败");
					_this.$router.push("huiyuan");
				}else if(datas.code == 3){
					alert("购买商品不符合");
				}else if(datas.code == 4){
					alert("您的余额不足，请使用其他方式支付");
				}
			}).catch(function(err){
				console.log(err)		
			})	
		},
//			确认支付部分
			enter(){
				let _this = this;
				var order = 1;
				let imgURL = this.imgURl;
				let  type= _this.type;
				let indentid = _this.indentid;	//订单id
				let fudao = _this.fudao;	//辅导信息
				let info = window.localStorage.data;
				if(type == 2){
					window.location.href="http://www.zuqiuxi.top/Home/Alipay/pay_zfb/id/"+indentid+"/token/"+info+"/fdy/"+fudao;
				}else if(type == 1){
				let params = new URLSearchParams();
				params.append('token', info);
				params.append('id', indentid);
				params.append('fdy', fudao);
				this.$axios({
				   url:"Home/Alipay/pay_ye",
					method:"post",
					data:params
				   }).then(function(res){
				   	var datas = res.data;
					if(datas.code == 0){
						alert("支付失败");
					}else if(datas.code == 1){
						alert("支付成功");
						_this.$router.push({ name: 'zhifuOk', params: { id: _this.URLid }});
					}else if(datas.code == 3){
						alert("余额不足");
					}else if(datas.code == 4){
						alert("未找到该订单，请重新购买");
						_this.$router.push("huiyuan");
					}
				}).catch(function(err){
					console.log(err)		
				})
				}
			}
		}
	}
</script>

<style scoped="scoped">
	@import "../css/public.css";
	/*更换辅导员*/
	.change{
		width: 90%;
		background: #fff;
		height: 40px;
		margin: 20px auto;
	}
	.change input{
		width: 100%;
		height: 39px;
		font-size: 16px;
		color: #666666;
		line-height: 38px;
	}
	
	.header_left{
		width: 100px;
	}
	.header_left i{
		font-size: 20px;
	}
	.header_left span{
		font-size: 16px;
	}
	.main{
		padding-top: 40px;
	}
	/*={支付宝}=*/
	.zhifubao{
		width: 95%;
		height: 50px;
	}
	.each_main h5{
		width: 10px;
		height: 10px;
		border: 1px solid #ccc;
		margin: 0 5px;
		border-radius: 50%;
		margin-top: 20px;
		background-color:#fff;
	}
	.each_main .activeclor{
		background-color: #FCB317;
		border-color: #FCB317;
	}
	.each_main h4{
		font-size:30px;
		color:#3C98E3;
		line-height: 50px;
	}
	.each_main h3{
		font-size: 14px;
		color: #333;
		line-height: 25px;
		margin-left: 10px;
	}
	/*=银行卡=*/
	.bank_logo{
		width: 50px;
		height: 40px;
	}
	.bank_logo img{
		width: 100%;
		height: 100%;
	}
	.bankcard{
		margin-top: 10px;
		width: 90%;
		background: #fff;
	}
	.bankcard_main{
		width: 95%;
		height: 50px;
		padding: 10px 0;
	}
	.bankcard_main h5{
		font-size: 40px;
		margin-right: 8px;
		line-height: 50px;
	}
	.bankcard_text h4{
		color:#333333;
		line-height: 20px;
		font-size: 14px;
		margin-bottom: 14px;
	}
	.bankcard_text p{
		color:#999;
		line-height: 20px;
		font-size: 12px;
	}
	.bankcard_main h6{
		font-size: 20px;
		line-height: 50px;
		color: #999;
	}
	/*=结束=*/
	.money{
		width: 90%;
		background: #fff;
		margin-top: 10px;
	}
	.money_main{
		width: 95%;
		padding: 8px 0;
	}
	.money_main h4{
		color: #333333;
		font-size: 14px;
		line-height: 20px;
	}
	.money_text{
		height: 80px;
	}
	.money_text span{
		line-height: 78px;
		font-size: 30px;
		color: #333;
	}
	.money_text input{
		width: 80%;
		height: 50px;
		font-size: 28px;
		color: #333;
	}
	.money_main h5{
		color: #999999;
		font-size: 14px;
		line-height: 30px;
	}
	.footer_button{
		background:#F3961F;
		line-height: 30px;
		font-size: 18px;
		margin-top:30px;
	}	
</style>